<template>
    <div class="tableContainer">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
            <el-form-item label="">
                <el-input class="elInput" v-model="formInline.name" placeholder="输入名词名称"></el-input>
            </el-form-item>
           
            <el-form-item>
                <el-button class="elBtn" type="primary" @click="selectNounData">查询</el-button>
                <el-button class="elBtn" type="primary" @click="openDialog('', '',1)">新增</el-button>

                <!-- <el-upload
                    class="upload-demo"
                    action="string"
                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    :http-request="exportData"
                    :show-file-list="false"
                    :beforeUpload="beforeAvatarUpload"
                    style="display:inline-block;margin-left:10px;">
                    <el-button slot="trigger" class="elBtn" type="primary">批量导入</el-button>
                </el-upload> -->
            </el-form-item>
        </el-form>
        <el-table :data="tableData" max-height="88%" border style="width: 100%" >
            <el-table-column type="index" min-width="3%" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="name" label="名称名称"  min-width="15%" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="prExplain" label="名词解释"  min-width="30%" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" min-width="15%" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="createUserName" label="创建人" min-width="10%" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="op" label="操作" min-width="25%" align="center">
                <template slot-scope="scope">
                    <el-button class="elBtn"  type="primary" size="mini" icon="edit"  @click="openDialog(scope.$index, scope.row,2)">修改</el-button>
                    <el-button size="mini" icon="delete" type="danger" @click="openDialog(scope.$index, scope.row,3)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background 
			layout="prev, pager, next, sizes, total, jumper"
			:page-sizes="pagesizes"
			:page-size="pagesize"
			:total="totalNum"
            @current-change="changePage"
            @size-change="sizeChange"
			>
		</el-pagination>

        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" center @close="clearForm">
            <el-form ref="form" :model="form">
                <el-form-item label="名词类型" :label-width="formLabelWidth" prop="category" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                    <el-select v-model="form.category" style="width:90%">
                        <el-option
                            v-for="item in nounType"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名词名称" :label-width="formLabelWidth" prop="name" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                    <el-input class="elInput" v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="名词解释" :label-width="formLabelWidth" prop="prExplain" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                    <el-input type="textarea" class="elInput" v-model="form.prExplain" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="doSave">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确定删除这条信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="doDeleteUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    

</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible: false, // 控制修改对话框的显示隐藏
            centerDialogVisible:false, // 控制删除提示框的显示隐藏
            nounId:"", // 存选择数据的用户id
            uounIds:[], // id数组
            pagesizes:[10,15,20,25],
            pagesize:10,// 每页条数
            currpage: 1, // 当前页
            totalNum:0, // 总条数
            dialogTitle:"",
            status:true,
            formInline: { // 查询参数
                name: '',
            },
            tableData: [], // 页面数据
            nounType: [], // 名称类型
            form: { // 表单参数
                id:'',
                name: '',
                prExplain: '',
                category:''
            },
            formLabelWidth: '20%', // label宽度
            clientHeight:""  // 屏幕高度
      }
    },
    created(){
        this.$common.selectDictByCode("CATEGORY",res => {
            if(res.data.success)this.nounType = res.data.data.list
        })
        // 获取屏幕高度
        this.clientHeight = this.$common.getClientHeight()
        this.pagesize = Math.ceil((this.clientHeight - 265)/55)
        this.pagesizes[0] = this.pagesize

        // 当页面初始化的时候，获取名词数据
        this.selectNounData()
    },
    methods:{
        // 日期格式化
        dateFormat(row, column, cellValue, index){
            if(cellValue){
                let moment = require("moment")
                let pattern="YYYY-MM-DD HH:mm:ss"
                return moment(cellValue).format(pattern);
            }else{
                return "";
            }
        },
        beforeAvatarUpload(file){
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)				
            const extension = testmsg === 'xls'
            const extension2 = testmsg === 'xlsx'
            if(!extension && !extension2) {
                this.$message({
                    message: '只能上传xls、xlsx格式的文件!',
                    type: 'warning'
                });
            }
            return extension || extension2 
        },
        // 批量导入
        exportData(param){
            let uploadData = new FormData();
            uploadData.append('file', param.file);
            this.$api.exportData(uploadData).then(result => {
                if(result.data.success){
                    this.selectNounData()
                }
            });
        },
        // 控制对话框显示隐藏
        openDialog(index,row,type){
            // 获取id
            this.nounId = row.id
            this.uounIds.push(row.id)
            if(type == 1){
                this.dialogFormVisible = true
                this.dialogTitle = "新增"
            }else if(type == 2){
                
                this.$api.selectNounById(this.nounId).then(result=>{
                    var _this = this
                    this.$common.filterLogin(result,_this,()=>{
                        _this.form = result.data.data
                        if(result.data.success){
                            _this.dialogFormVisible = true
                        }
                    })
                    
                })
                this.dialogTitle = "修改"
            }else if(type == 3){
                this.centerDialogVisible = true
            }
        },
        // 查询用户数据
        selectNounData(){
            const params = {
                page:this.currpage,
                limit:this.pagesize,
                name:this.formInline.name?this.formInline.name:null
            }
            this.$api.selectNounPage(params).then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.tableData = result.data.data.records
                        _this.totalNum = result.data.data.total
                    }
                })
                
            })
        },
        // 修改用户信息
        doSave(){
            this.$refs['form'].validate((valid) => {
                if(valid){
                    if(!this.form.id){ 
                        this.form.createUserId = localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')).id:""
                        this.$api.addNoun(this.form).then(result=>{
                            this.successFun(result)
                        })
                    }else{
                        this.$api.modifyNoun(this.form).then(result=>{
                            this.successFun(result)
                        })
                    }
                }
            })
            
            
        },
        // 删除用户信息
        doDeleteUser(){
            const params = {
                ids:this.uounIds
            }
            this.$api.deleteNoun(params).then(result=>{
                this.successFun(result)
            })
        },
        // 接口调用成功的方法
        successFun(result){
            var _this = this
            this.$common.filterLogin(result,_this,()=>{
                _this.tipMsg = result.data.message
                _this.clearForm()
                _this.selectNounData()
                if(result.data.success){
                    _this.$message({center: true,message:_this.tipMsg?_this.tipMsg:"操作成功",type: 'success'});
                }else{
                    this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                }
            })
            
        },
        // 清空表单
        clearForm(){
            this.centerDialogVisible = false
            this.dialogFormVisible = false
            // this.$refs.form.resetFields()
            // 清楚表单数据
            for(let item in this.form){
                this.form[item] = ""
            }
            this.$refs['form'].clearValidate()
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectNounData()
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectNounData()
        }
    },
    filters:{
    }
}
</script>

<style lang="scss" scoped>
.tableContainer{
    height: 97%;
    padding: 10px;
    background: #FDFDFD;
    // background: transparent;
    border-radius: 5px;
    // box-shadow: 5px 5px 4px rgba(204, 204, 204, 0.5)
    .el-pagination.is-background{
        text-align: right;
        padding:10px 5px;
    }
    .el-table,.el-table th, .el-table tr{
        background: transparent !important;
    }
}
</style>